<template>
  <div style="width: 100%;height: 100%;background-color: white;">
    <div class="list">
      <div style="padding-left: 20px">
        <div v-for="(item,i) in itemTitle"
             :key="i"
             @click="toItem(i+1)"
             :class="activeKey==(i+1)?'focus':''">{{ item }}</div>
      </div>
    </div>

    <purchase-item-list ref="purchaseItemList" v-if="activeKey == 1"></purchase-item-list>
    <other-in-depository-item-list ref="otherInDepositoryItemList" v-if="activeKey == 2"></other-in-depository-item-list>
    <other-out-depository-item-list ref="otherOutDepositoryItemList" v-if="activeKey == 3"></other-out-depository-item-list>
    <allocate-and-transfer-item-list ref="allocateAndTransferItemList" v-if="activeKey == 4"></allocate-and-transfer-item-list>
    <inventory-gather-list ref="inventoryGatherList" v-if="activeKey == 5"></inventory-gather-list>
  </div>



</template>

<script>

  import purchaseItemList from "./tabs/purchaseItemList";
  import materialStockItemList from "./tabs/materialStockItemList";
  import otherInDepositoryItemList from "./tabs/otherInDepositoryItemList";
  import otherOutDepositoryItemList from "./tabs/otherOutDepositoryItemList";
  import allocateAndTransferItemList from "./tabs/allocateAndTransferItemList";
  import inventoryGatherList from "./tabs/inventoryGatherList";

  export default {
    name: "materialReportFormsMain",
    components:{
      purchaseItemList,materialStockItemList,otherInDepositoryItemList,otherOutDepositoryItemList,allocateAndTransferItemList,inventoryGatherList,
    },
    data(){
      return{
        currentKey: 1,
        activeKey: "1",
        itemTitle: [
          "采购明细表",
          "其他入库明细表",
          "其他出库明细表",
          "调拨明细表",
          "进销存汇总表",
        ],
      }
    },
    methods:{
      showTab(key){
        this.currentKey = key;
      },
      toItem(i){
        this.activeKey = i
      }
    }
  }
</script>

<style scoped scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }
  .list{
    width: 100%;
    height: 50px;
    overflow: hidden;
    overflow-x: scroll;
    border-bottom: 1px solid #f6f6f6;
  &>div{
     display: flex;
     width: max-content;
  div{
    padding-right: 20px;
    line-height: 50px;
    text-align: center;
  }
  div::after{
    display: block;
    margin: -3px auto 0;
    width: 0px;
    height: 2px;
    content: '';
    background-color: #40a9ff;
  }
  .focus{
    color: #40a9ff;
  }
  .focus::after{
    width: 4em;
    transition: 0.5s;
  }
  }
  }
</style>